<script setup lang="ts">
import { computed } from "vue";

type Prop = {
  label?: string;
  name: string;
  width?: number | string;
};
const props = defineProps<Prop>();

const style = computed(() => {
  const s: any = {};
  if (props.width) {
    s.width = `${props.width}`.replaceAll("px", "") + "px";
  } else {
    s.width = "var(--k-seg-tab-width)";
  }
  return s;
});
</script>

<template>
  <el-tab-pane :name="props.name" :label="props.label">
    <template #label>
      <slot name="label">
        <div class="pl-4 pr-4 flex justify-center" :style="style">
          <span>
            {{ props.label }}
          </span>
        </div>
      </slot>
    </template>
    <slot />
  </el-tab-pane>
</template>
<style lang="scss" scoped></style>
